<!-- 删除客户端组 -->
<template>
  <div>
    <a-modal 
      v-model="modalVisible" 
      @ok='handleDelete'
      @cancel="handleCancel"
      :maskClosable="false"
      :width="430"
      v-dragModal
    >
      <template slot="title">
        <!-- <i class="icon icon-error16f tip-icon"></i> -->
        <Iconfont class="icon  tip-icon" type="icon-error16f"></Iconfont>
        <span>{{$t('Delete')+$t('Client-group')}}</span>
      </template>

      <div>
        <span v-if="$store.state.language=='zh'">
          删除客户端组 "{{targetUserGroup.group}}" 后，组内的LUN及其保存的数据将会被删除！
          <div v-if="targetUserGroup.client && targetUserGroup.client.length>0 && targetUserGroup.luns && targetUserGroup.luns.length>0">
            该组还关联了客户端："{{targetUserGroup.client.join(',')}}"和LUN："{{targetUserGroup.luns.join(',')}}"
          </div>
          <div>您确定要删除吗？</div>
        </span>
        <span v-else>
          After deleting the client group"{{targetUserGroup.group}}", the LUNs in the group and their saved data will be deleted!
          <div v-if="targetUserGroup.client && targetUserGroup.client.length>0 && targetUserGroup.luns && targetUserGroup.luns.length>0">
            This group is also associated with clients:"{{targetUserGroup.client.join(',')}}"and LUN:"{{targetUserGroup.luns.join(',')}}"
          </div>
          <div>Are you sure you want to delete?</div>
        </span>
      </div>
      <div v-if="targetUserGroup.client && targetUserGroup.client.length>0 && targetUserGroup.luns && targetUserGroup.luns.length>0">
        <a-checkbox :checked="delChecked" @change="onChange">
          <span v-if="$store.state.language=='zh'">
            我已知晓该风险，并承担该责任！
          </span>
          <span v-else>
            I am aware of the risk and take responsibility for it!
          </span>
        </a-checkbox>
      </div>

      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button 
          v-if="targetUserGroup.client && 
            targetUserGroup.client.length>0 && 
            targetUserGroup.luns && 
            targetUserGroup.luns.length>0" 
          class="submit-btn" 
          :class="delChecked ? 'error-btn' :''" 
          @click="handleDelete" 
          :loading="submitLoading" 
          :disabled="!delChecked"
        >
          {{$t('Delete')}}
        </a-button>
        <a-button v-else class="error-btn submit-btn" @click="handleDelete" :loading="submitLoading">
          {{$t('Delete')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "DelClientGroup",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetUserGroup: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      delChecked: false
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    //删除用户组
    async handleDelete() {
      this.submitLoading = true;
      const params = {
        target: this.targetUserGroup.target,
        group_name: this.targetUserGroup.group,
      };
      try{
        const res = await this.$api.iscsi.delUserGroupRequest(params);
        if(res && res.data) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
          this.$emit('updateUserGroup');
        }
      }catch {
        this.handleCancel();
      }
      this.handleCancel();
    },

    //关闭删除用户组
    handleCancel() {
      this.$emit('closeUserGroupDrawer', 'del');
      this.delChecked = false;
      this.submitLoading = false;
    },

    //改变checkbox的状态
    onChange(e) {
      this.delChecked = e.target.checked;
    },
  },
}
</script>
<style scoped>
  .tip-icon {
    color: var(--mainRedColor);
    margin-right: 8px;
  }
  .error-btn {
    background-color: var(--mainRedColor);
    border-color: var(--mainRedColor);
    color: #fff;
  }
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
  }
  ::v-deep.ant-modal-body {
    padding: 12px 24px;
  }
</style>